<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin:0;padding:0;}
			a{text-decoration:none;}
			#win{ position:relative; width:730px; height:454px; border:5px solid #ccc; margin:0 auto;}
			#move-img{ width:730px; height:454px; position:relative;}
			img{ width:730px; height:454px; display:block;}
			#move-img li{ position:absolute; left:0; top:0; opacity:0; list-style:none;}
			#move-img .first{opacity:1; background:#FF0000;}
			#move-btn{ width:300px; height:30px; position:absolute; top:400px; left:200px;}
			#move-btn li{ float:left; list-style:none;}
			#move-btn li a{ display:block; width:20px; text-align:center; line-height:20px; color:#fff; margin-left:30px; height:20px; background:#999; border-radius:50%;}
			#move-btn li .active{ background:#f00;}
			#box{display:none; position:absolute; top:200px; width:730px;}
			#box .a1{ width:30px; height:60px; float:left; background:rgba(0,0,0,.2); line-height:60px; text-align:center;}
			#box .a2{ width:30px; height:60px; float:right; background:rgba(0,0,0,.2);line-height:60px; text-align:center;}
			
        </style>
	</head>
	<script src="js/jquery.js"></script>
	<script>
		(function($){
			$(function(){
			$('#win').on('mouseover',function(){
				clearInterval(timer);
				$('#box').css('display','block');
			})
			$('#win').on('mouseout',function(){
				timer=setInterval(move,1000);
				$('#box').css('display','none');
				})
			$('#move-btn li a').on('mouseover',function(){
				i=$(this).text()-2;
				move();
				//i=iIndex;
				});
			$('#box .a1').click(function(){
				i-=2;
				move();
			});
			$('#box .a2').click(function(){
				
				move();
				});	
			var i=0;	
			function move(){
				i++;
				$('#move-img li').stop(true).animate({opacity:0},500).eq(i%6).stop().animate({opacity:1});
				$('#move-btn li a').removeClass();
				$('#move-btn li a').eq(i%6).addClass('active');
				
				}
			var timer=setInterval(move,1000)
			})
		}(jQuery))
		
	</script>
	<body>
		<div id="win">
        <ul id="move-img">
        	<li class="first"><img src="img/1.jpg"></li>
            <li><img src="img/2.jpg"></li>
            <li><img src="img/3.jpg"></li>
            <li><img src="img/4.jpg"></li>
            <li><img src="img/5.jpg"></li>
            <li><img src="img/6.jpg"></li>
        </ul>
        <ul id="move-btn">
        	<li><a class="active" href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
        <div id="box">
        	<a class="a1" href="#"><</a>
            <a class="a2" href="#">></a>
        </div>
        </div>
	</body>
</html>
